<template>
  <div class="userList2">
    <el-dialog
      title="人员列表"
      :visible.sync="dialogVisible"
      width="800px"
      @close="closeOpen"
      :modal="true"
      :appendToBody="true"
      v-dialog-drag
      :close-on-click-modal="false"
      :top="scrollTop"
    >
      <el-form :model="queryParams" ref="queryForm" @submit.native.prevent>
        <el-row :gutter="20">
          <el-col :span="9" :offset="1">
            <el-form-item label="所属部门" prop="branchinnercode" label-width="80px">
              <treeselect v-model="queryParams.branchinnercode" :options="deptList" :show-count="true" :disabled="isDisabledSelect"
                          placeholder="请选择归属部门"/>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item prop="realname">
              <el-input
                v-model="queryParams.realname"
                placeholder="请输入真实姓名"
                clearable
                size="small"
                @keyup.enter.native="searchList"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="display: flex">
              <el-button  icon="el-icon-search" size="mini" @click="searchList">查询</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        ref="table"
        :data="roleList"
        tooltip-effect="dark"
        style="width: 100%"
        type="selection"
        v-if="dialogVisible"
        v-loading="loading"
        stripe border
        @select="select"
        @select-all="selectAll"
        @row-click="leftBtn"
      >
        <el-table-column type="selection" width="60" align="center"/>
        <el-table-column label="用户名" align="center" prop="username"/>
        <el-table-column label="真实姓名" align="center" prop="realname"/>
        <el-table-column label="状态" align="center" prop="status">
          <template slot-scope="scope">
            <span>{{ statusS(scope.row.status) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="beSureSelect()">保 存</el-button>
        <el-button @click="dialogVisible= false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import request from '@/utils/request'

  export default {
    name: "index",
    components: {},
    data() {
      return {
        dialogVisible: this.visibles,
        num: '',
        roleList: [],
        // 总条数
        total: 0,
        //部门列表
        deptList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          code: null,
          branchinnercode: null,
          realname: null
        },
        loading: true,
        scrollTop: null,
        codeArr: [],
        nameArr: [],
        userIdArr: []
      }
    },
    props: {
      'visibles': {
        type:Boolean,
        default:false
      },
      'ids': {
        type: String,
        default: ''
      },
      'idsName': {
        type: String,
        default: ''
      },
      'isRadio': {
        type:Boolean,
        default:false
      },
      // 默认选中的部门值
      'branchinnercode': {
        type: String,
        default: ''
      },
      // 是否禁用下拉组织筛选
      'isDisabledSelect':{
        type:Boolean,
        default:false
      },
    },
    created() {
      // this.getList();
      // this.getDept();
    },
    watch: {
      'visibles': function () {
        this.dialogVisible = this.visibles;
        if (this.dialogVisible === false) {
          this.num = '';
          this.queryParams = {
            pageNum: 1,
            pageSize: 10,
            code: null,
            branchinnercode: null,
            username: null
          }
        } else {
          this.queryParams = {
            pageNum: 1,
            pageSize: 10,
            code: null,
            branchinnercode: this.branchinnercode || null,
            username: null
          }
          this.codeArr = this.ids ? this.ids.split(',') : [];
          this.nameArr = this.idsName ? this.idsName.split(',') : [];
          this.userIdArr = [];
          this.getDept();
          this.getList();
        }
      },
      'queryParams.branchinnercode': 'getList'
    },
    methods: {
      select(selection, row) {
        if(this.isRadio){ // 单选
          this.$refs.table.clearSelection();
          if(this.nameArr.length == 1){
            if (this.codeArr.indexOf(row.username) > -1) {
              this.codeArr = [];
              this.nameArr = [];
              this.userIdArr = [];
            } else {
              let codeArr = [row.username];
              let nameArr = [row.realname];
              let userIdArr = [row.userId];
              this.codeArr = codeArr;
              this.nameArr = nameArr;
              this.userIdArr = userIdArr;
              this.$refs.table.toggleRowSelection(row, true);
            }
          }else{
            let codeArr = [row.username];
            let nameArr = [row.realname];
            let userIdArr = [row.userId];
            this.codeArr = codeArr;
            this.nameArr = nameArr;
            this.userIdArr = userIdArr;
            this.$refs.table.toggleRowSelection(row, true);
          }
          return;
        }

        if (row.status == 'S') {
          this.$message({
            message: '该人员状态异常，请选择其他角色!',
            type: 'warning'
          });
          this.$refs.table.toggleRowSelection(row, false);
          if (this.codeArr.indexOf(row.username) > -1) {
            this.codeArr.splice(this.codeArr.indexOf(row.username), 1)
            this.nameArr.splice(this.codeArr.indexOf(row.realname), 1)
            this.userIdArr.splice(this.codeArr.indexOf(row.userId), 1)
          }
          return;
        }
        if (this.codeArr.indexOf(row.username) > -1) {
          this.codeArr.splice(this.codeArr.indexOf(row.username), 1)
          this.nameArr.splice(this.codeArr.indexOf(row.realname), 1)
          this.userIdArr.splice(this.codeArr.indexOf(row.userId), 1)
        } else {
          this.codeArr.push(row.username)
          this.nameArr.push(row.realname)
          this.userIdArr.push(row.userId)
        }
      },
      selectAll(selection) {
        if(this.isRadio){
          this
          this.$message({
            message: `只支持单选`,
            type: 'warning'
          });
          this.$refs.table.clearSelection();
          return;
        }
        if (selection.length > 0) {
          selection.forEach(row => {
            if (row.status == 'S') {
              this.$message({
                message: `用户名为${row.username}的状态异常，请选择其他角色!`,
                type: 'warning'
              });
              this.$refs.table.toggleRowSelection(row, false);
              if (this.codeArr.indexOf(row.username) > -1) {
                this.codeArr.splice(this.codeArr.indexOf(row.username), 1)
                this.nameArr.splice(this.codeArr.indexOf(row.realname), 1)
                this.userIdArr.splice(this.codeArr.indexOf(row.userId), 1)
              }
              return;
            }
            if (this.codeArr.indexOf(row.username) == -1) {
              this.codeArr.push(row.username)
              this.nameArr.push(row.realname)
              this.userIdArr.push(row.userId)
            }
          })
        } else {
          this.roleList.forEach(row => {
            if (this.codeArr.indexOf(row.username) > -1) {
              this.codeArr.splice(this.codeArr.indexOf(row.username), 1)
              this.nameArr.splice(this.codeArr.indexOf(row.realname), 1)
              this.userIdArr.splice(this.codeArr.indexOf(row.userId), 1)
            }
          })
        }
      },
      beSureSelect() {
        this.dialogVisible = false;
        this.num = 2
      },
      closeOpen() {
        var arr = [{name: this.nameArr.join(','), code: this.codeArr.join(','), userId: this.userIdArr.join(',')}]
        if (this.num == 2) {
          this.$emit('closeDialog', arr);
        } else {
          this.$emit('closeDialog')
        }
      },
      //获取人员列表
      getList() {
        this.loading = true;
        request({
          url: '/system/user/getUseName',
          method: 'get',
          params: this.queryParams
        }).then(res => {
          this.roleList = res.rows;
          if (this.roleList != null && this.roleList != []) {
            this.$nextTick(() => {
              this.roleList.forEach(row => {
                if (this.codeArr.indexOf(row.username.toString()) > -1) {
                  row.flag = true;
                  if(this.$refs.table){
                    this.$refs.table.toggleRowSelection(row);
                  }
                }
              });
            })
          }
          this.total = res.total;
          this.loading = false;
        }).catch(err => {
          this.$message.error('数据获取失败！');
          this.loading = false;
        })
      },
      statusS(row) {
        if (row == 'Y') {
          return '正常'
        } else {
          return '异常'
        }
      }
      ,
      //获取部门列表
      getDept() {
        var that = this;
        request({
          url: '/system/dept/treeselect',
          method: 'get',
        }).then(res => {
          that.deptList = res.data;
        }).catch(err => {

        })
      }
      ,
      //搜索
      searchList() {
        this.queryParams.pageNum = 1;
        this.getList();
      }
      ,
      //重置
      resetQuery() {
        this.queryParams.pageNum = 1;
        this.queryParams.username = null;
        this.resetForm("queryForm");
        this.getList();
      }
      ,
      leftBtn(row, col, event) {
        this.select(null,row)
      },
      getScroll() {
        var appMain = document.getElementById('app-main');
        this.scrollTop = appMain.scrollTop;
        this.scrollTop += 'px';
      }
      ,

    },
    mounted() {
       this.utils.mounteds(this)
    },
    destroyed() {
      this.utils.destroyeds(this)
    }
  }
</script>

<style>
  .role .vue-treeselect__control {
    height: 30px;
  }

  .role .vue-treeselect__placeholder,
  .role .vue-treeselect__single-value,
  .role .el-form-item__content,
  .role .el-form-item--medium .el-form-item__content,
  .role .el-form-item--medium .el-form-item__label {
    line-height: 30px;
  }

</style>
<style>
  .userList2 th .el-checkbox__inner {
    /*display: none;*/
  }
</style>
<style scoped>
  .el-form-item {
    margin-bottom: 10px;
  }

</style>
